<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>项目列表</title>
		<link rel="stylesheet" href="/dvmini/res/plugins/layui/css/layui.css">
		<link rel="stylesheet" href="/dvmini/res/css/basic.css">
	</head>
	<style>
		.layui-form-select dl{
			max-height:190px;
		}
		#allmap {top:10px;width:100%;height: 400px;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	
	<body class="wrap">
		<div class="layui-form Detailbtn" style="display:block;">
			  <div class="layui-form-item">
			    <label class="layui-form-label"><i style="color:red;margin-right:5px;">*</i>项目名称</label>
			    <div class="layui-input-inline" style="width:390px;">
			      <input type="text" name="name"   lay-verify="name" placeholder="项目名称"  class="layui-input">
			    </div>
			    <div class="layui-form-mid layui-word-aux">不超过20个汉字</div>
			  </div>
			  <div class="layui-form-item">
			    <label class="layui-form-label"><i style="color:red;margin-right:5px;">*</i>海报模板</label>
			    <div class="layui-input-inline">
			      <select name="postertempletid" lay-search="">
			        <option value="">全部</option>
			      </select>
			    </div>
			  </div>
			  <div class="layui-form-item">
			    <label class="layui-form-label">位置</label>
			   <!--  <div class="layui-input-inline">
			      <input type="text" name="lng"  readonly lay-verify="required" placeholder="经度"  class="layui-input" style="background-color:#f5f5f5;color:#666;">
			    </div>
			    <div class="layui-input-inline">
			      <input type="text" name="lat" readonly lay-verify="required" placeholder="纬度"  class="layui-input" style="background-color:#f5f5f5;color:#666;">
			    </div> -->
			    <div class="layui-input-inline">
			      <input type="number" name="lng"   lay-verify="required" placeholder="经度"  class="layui-input" >
			    </div>
			    <div class="layui-input-inline">
			      <input type="number" name="lat"  lay-verify="required" placeholder="纬度"  class="layui-input" >
			    </div>
			  </div>
			  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=DD279b2a90afdf0ae7a3796787a0742e"></script>
			   <div class="layui-form-mid layui-word-aux" style="padding-bottom:0;">提示：可以在地图上点击位置获取坐标（鼠标滚动放大缩小地图）</div>
			    <div id="allmap"></div>
			   <div class="layui-form-item" style="margin-top: 30px;">
			   <button class="layui-btn" lay-submit lay-filter="submit">提交</button>
				<button class="layui-btn layui-btn-primary resetBtn">重置</button>
				</div>
  </div>
		
		
		
		
	</body>

	<script src='/dvmini/res/js/jquery.min.js'></script>
	<script src="/dvmini/res/plugins/layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript" src="/dvmini/res/js/me.js"></script>
	<script>
	// 百度地图API功能
	 var map = new BMap.Map("allmap");            
	var map = new BMap.Map("allmap",{minZoom:4,maxZoom:18}); // 创建Map实例,设置地图允许的最小/大级别
	map.enableScrollWheelZoom(true);
	
	//单击获取点击的经纬度
	map.addEventListener("click",function(e){
		$("input[name=lng]").val(e.point.lng);
		$("input[name=lat]").val(e.point.lat);
		var allOverlay = map.getOverlays();
		if(allOverlay.length>0){
			function deletePoint(){
				for (var i = 0; i < allOverlay.length ; i++){
					map.removeOverlay(allOverlay[i]);
				}
			}
			deletePoint()
			var point = new BMap.Point(e.point.lng,e.point.lat);
			var marker = new BMap.Marker(point);  // 创建标注
			map.addOverlay(marker);              // 将标注添加到地图中
			marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
		}
	}); 
		layui.use(['form', 'element', 'laydate', 'layer', 'laypage'], function() {
			var form = layui.form(),
				element = layui.element(),
				laydate = layui.laydate,
				layer = layui.layer,
				laypage = layui.laypage;
			
			$("input[name=lng],input[name=lat]").blur(function(){
				var plng=$("input[name=lng]").val();
				var plat=$("input[name=lat]").val();
				var allOverlay = map.getOverlays();
				if(allOverlay.length>0){
					function deletePoint(){
						for (var i = 0; i < allOverlay.length ; i++){
							map.removeOverlay(allOverlay[i]);
						}
					}
					deletePoint()
					var point = new BMap.Point(plng,plat);
					var marker = new BMap.Marker(point);  // 创建标注
					map.addOverlay(marker);              // 将标注添加到地图中
					marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
					
				}
			});
			
			//下拉海报
			$.post("/dvmini/poster/getAllPostertemplet",function(data){
				console.log(data);
				var str="";
				for(var i=0;i<data.data.length;i++){
					str+='<option value='+ data.data[i].id +'>'+ data.data[i].name +'</option>';
				}
				$("select[name=postertempletid]").append(str);
				form.render();
			})
			$(".resetBtn").on("click",function(){
				$("input[name=name]").val("");
				$("select[name=postertempletid]").val("0");
				var allOverlay = map.getOverlays();
				if(allOverlay.length>0){
					function deletePoint(){
						for (var i = 0; i < allOverlay.length ; i++){
							map.removeOverlay(allOverlay[i]);
						}
					}
					deletePoint()
				}
				$("input[name=lng]").val(113.754653);
				$("input[name=lat]").val(23.025333);
				map.centerAndZoom(new BMap.Point(113.754653,23.025333),13); 
				var point = new BMap.Point(113.754653,23.025333);
				var marker = new BMap.Marker(point);  // 创建标注
				map.addOverlay(marker);              // 将标注添加到地图中
				marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
				form.render();
			})
			var id=getUrl_G("id");
			if(id>0){
				$.post("/dvmini/project/getProject",{
					id:id
				},function(data){
					console.log(data);
					 if(data.code==0){
						$("input[name=name]").val(data.data.name);
						$("select[name=postertempletid]").val(data.data.postertempletid);
						$("input[name=lng]").val(data.data.lng);
						$("input[name=lat]").val(data.data.lat);
						map.centerAndZoom(new BMap.Point(data.data.lng,data.data.lat),13); 
						var point = new BMap.Point(data.data.lng,data.data.lat);
						var marker = new BMap.Marker(point);  // 创建标注
						map.addOverlay(marker);              // 将标注添加到地图中
						marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
						form.render();
					} 
				})
				 
			}else{
				$("input[name=lng]").val(113.754653);
				$("input[name=lat]").val(23.025333);
				map.centerAndZoom(new BMap.Point(113.754653,23.025333),13); 
				var point = new BMap.Point(113.754653,23.025333);
				var marker = new BMap.Marker(point);  // 创建标注
				map.addOverlay(marker);              // 将标注添加到地图中
				marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
				
				
			}
			
		
			form.on('submit(submit)', function(data){
				    var name=$("input[name=name]").val();
					var templetid=$("select[name=postertempletid]").val();
					var lng=$("input[name=lng]").val();
					var lat=$("input[name=lat]").val();
				 	if(name==""){
						top.layer.msg("请填写项目名称");
						return false;
					}else{
						if(strlen(name) > 40) {
				    		top.layer.msg("项目名称不超过20个汉字");
				    		return false;
						}
					}
					if(templetid==""||templetid=="0"){
						top.layer.msg("请选择海报");
						return false;
					}
					
					if(id>0){
						//修改项目
						$.post("/dvmini/project/updateProject",{
							id:id,
							name:name,
							templetid:templetid,
							lng:lng,
							lat:lat
						},function(data){
							console.log(data);
							 if(data.code==0){
								top.layer.msg("修改成功");
								
							} else{
								top.layer.msg(data.msg);
							}
						})  
					}else{
						//添加项目
						$.post("/dvmini/project/addProject",{
							name:name,
							templetid:templetid,
							lng:lng,
							lat:lat
						},function(data){
							console.log(data);
							if(data.code==0){
								top.layer.msg("添加成功");
								form.render();
							}else{
								top.layer.msg(data.msg);
							}
						}) 
					}
					return false;
					
			  });
			

		})
	</script>

</html>